<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-cell :title="invest_name" icon="notes-o" />
    <div v-for="(item, index) in questions" :key="item.id">
      <van-cell-group>
      <van-cell>
        <template #title>
          <van-row>
            <van-col span="2">{{index + 1 }}、</van-col>
            <van-col span="22">{{item.name}}</van-col>
          </van-row>
        </template>
      </van-cell>
      </van-cell-group>
      <van-radio-group v-model="item.score" direction="horizontal">
        <van-radio v-for="(op, index) in item.options" :name="op.score" :key="index" >{{op.op_name}}</van-radio>
      </van-radio-group>
    </div>
    <div style="margin:16px;padding:10px;">
        <van-button round block type="info" @click="onSubmit" v-if="questions.length>0">提交</van-button>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar"
import { get_question_list, invest_result_add } from '@/api/question'

export default {
  name: "Question",
  components: {
    NavBar
  },

  data() {
    return {
      title: this.$route.meta.title,
      openid: "",
      invest_id: this.$route.query.invest_id,
      invest_name: "",
      questions: [],

    };
  },
  computed:{

  },
  methods: {
    getQuestions(){
        const params = {
          invest_id: this.$route.query.invest_id
        }
        get_question_list(params).then(res=>{
          res.data.forEach(item => {
            item["score"] = -1
          })
          this.questions = res.data;
          if(this.questions.length > 0){
            this.invest_name = this.questions[0].invest_name;
          }
          // let opts = res.data.map(item => item.options)
          // this.options = [].concat.apply([], opts)
          // console.log(this.options);
        }).catch(error => {
          if (error.response) {
            console.log(error.response.data);
          } else if (error.request) {
            console.log(error.request);
          } else {
            console.log('Error', error.message);
          }
          console.log(error.config);
        })
    },

    onSubmit(){

      const scores = this.questions.filter(item => item.score > -1)

      if(scores.length != this.questions.length){
        this.$toast("请继续选择.")
        return
      }

      let sum = scores.reduce((prev, cur) =>{
        return prev + cur.score
      }, 0);
      console.log(sum);
      const data = {
        openid: localStorage.getItem("openid"),
        invest: this.invest_id,
        score: sum,
      }
      invest_result_add(data).then(res => {
        this.$router.push({name: "Score", query:{score:res.data.score, name:this.invest_name, invest_id: this.invest_id}})
      }).catch( error => {
        console.log(error.message);
      })
      
    }

  },
  created() {
    this.getQuestions();
  },
};
</script>

<style  scoped>
  .van-radio-group{
    padding:10px 35px;
    font-size:14px;
  }
  .van-radio{
    margin: 5px 20px;
  }
</style>